<template>
  <div class="zi17">
    <div>
      <!-- 匿名插槽 -->
      <slot></slot>
      <!-- 具名插槽 -->
      <slot name="zi"></slot>
      <slot name="zi_sec"></slot>
      <!-- 作用域插槽 -->
      <slot name="zi_thi" :hh="astr"></slot>
      <slot name="zi_fou"></slot>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";

const astr = ref("亮闪闪");

const changeAstr = (v: string) => {
  astr.value = v;
};

defineExpose({ changeAstr });
</script>

<style scoped lang="scss">
.zi17 {
  widows: 100%;
  height: 200px;
  background-color: #f4f4f4;
  padding: 10px;
}
</style>
